<template>
    <div class="main">
        <div class="top_box">
            <el-input style="width:200px" placeholder="搜索用户名称/手机号" v-model="keyword"></el-input>
            <div style="width:150px;margin-left:10px">
                <el-select v-model="mobile_type" placeholder="请选择运营商">
                    <el-option v-for="item in operatorList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="width:150px;margin-left:10px">
                <el-select v-model="mobile_address " placeholder="请选择归属地">
                    <el-option label="江西" :value="1">
                    </el-option>
                    <el-option label="省外" :value="2">
                    </el-option>
                    <el-option label="未知" :value="0">
                    </el-option>
                </el-select>
            </div>
            <div style="width:150px;margin-left:10px">
                <el-select v-model="is_cz" placeholder="请选择是否充值">
                    <el-option label="未充值" :value="1">
                    </el-option>
                    <el-option label="已充值" :value="2">
                    </el-option>
                </el-select>
            </div>
            <div style="margin-left:10px">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-button type="warning" style="margin-left:10px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:10px" size="small" @click="reset" type="primary">重置</el-button>
            <el-button type="primary" style="margin-left:10px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>
            <el-button type="success" style="margin-left:10px" size="small " @click="dowloadTemplate">下载导入模板</el-button>
            <el-upload-file :showfile="false" v-model="importData" @change="importTemplate" accept=".xlsx" style="margin-left:10px" title="导入已充值手机号"></el-upload-file>

        </div>
        <!-- 表格 -->
        <el-table :data="data" ref="table" style="width: 100%" border @selection-change="onSelectionChange" height="100%" @row-click="onRowClick">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号">
            </el-table-column>
            <el-table-column label="服务商">
                <template slot-scope="{row}">
                    {{ comMobileType(row.mobile_type) }}
                </template>
            </el-table-column>
            <el-table-column label="归属地">
                <template slot-scope="{row}">
                    {{ comMobileAddress(row.mobile_address) }}
                </template>
            </el-table-column>
            <el-table-column prop="prize" label="中奖奖项">
            </el-table-column>
            <el-table-column prop="desc" label="奖品描述">
            </el-table-column>
            <el-table-column prop="money" label="中奖话费金额">
            </el-table-column>
            <el-table-column prop="create_time" label="中奖时间">
                <template slot-scope="{row}">
                    {{ computedTime(row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column label=" 是否充值">
                <template slot-scope="{row}">
                    {{ row.is_cz==1?"未充值":"已充值" }}
                    <!-- <span class="spanText" v-if="row.reson">({{row.reson}})</span> -->
                </template>
            </el-table-column>
            <el-table-column prop="reson" label="备注">
            </el-table-column>

            <el-table-column prop="create_time" label="充值时间">
                <template slot-scope="{row}">
                    {{ row.cz_time?computedTime(row.cz_time):"" }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="warning" v-if="row.is_cz==1&&row.is_import==1" @click="remit(row.id)">打款</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="inAll" v-if="data.length != 0">
            <div><span>合计金额：</span><span>{{ total_money }}元</span></div>
            <div><span>待确认金额：</span><span>{{ wait_total_money }}元</span></div>
        </div>
        <!-- <div class="total_amount" >
            <div class="item">
                <div>合计金额：</div>
                <div>{{ this.total_money }}元</div>
            </div>
        </div> -->
        <!-- 分页 -->
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
import queryString from "qs"
export default {
    components: {
        "el-upload-file": () => import("@/components/el-upload-file.vue"),
    },
    data() {
        return {
            importData: [],
            time: [],
            mobile_type: "",
            keyword: "",
            is_cz: "",
            mobile_address: "",
            total: 0,
            limit: 20,
            page: 1,
            data: [],
            total_money: "",
            wait_total_money: "",
            selection: [],
            operatorList: [
                {
                    id: 1,
                    name: "移动"
                },
                {
                    id: 2,
                    name: "联通"
                },
                {
                    id: 3,
                    name: "电信"
                },
                {
                    id: 4,
                    name: "无法判断"
                }
            ]

        }
    },
    methods: {
        // 获取表格初始数据
        getInfo(index = 1) {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            post({
                url: "/admin/answer.Prize/prize_log",
                data: {
                    page: index,
                    limit: this.limit,
                    keyword: this.keyword,
                    time,
                    mobile_type: this.mobile_type,
                    is_cz: this.is_cz,
                    mobile_address: this.mobile_address
                },
                loading: true,
            }).then(res => {
                this.total_money = res.total_money
                this.wait_total_money = res.wait_total_money
                this.data = res.list.data
                this.total = res.list.total
            })
        },
        // 打款
        remit(id) {
            this.$confirm('是否打款?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                post({
                    url: "/admin/answer.Prize/chongzhi",
                    data: {
                        id
                    },
                    loading: true,
                    successTip: true
                }).then(res => {
                    this.getInfo()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
        // 重置
        reset() {
            this.keyword = ''
            this.time = []
            this.mobile_type = ""
            this.is_cz = ""
            this.mobile_address = ""
            this.getInfo()
        },
        // 导出
        leadingOut() {
            let time = []
            let ids = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            if (this.selection.length != 0) {
                ids = this.selection.map(item => item.id)
            }
            open("http://nhcj.app65.cn/api/realmerit/prize_export?" + queryString.stringify({
                keyword: this.keyword,
                time,
                mobile_type: this.mobile_type,
                ids,
                is_cz: this.is_cz,
                mobile_address: this.mobile_address
            }))

        },
        // 下载导入模板
        dowloadTemplate() {
            post({
                url: "admin/answer.Subject/import_formwork"
            }).then(res => {
                open(res.url, "_parent - UR")
            })
        },
        // 导入
        importTemplate() {
            post({
                url: "/admin/answer.Subject/import_mobile",
                data: {
                    file: this.importData[0].url
                }
            }).then(res => {
                console.log(res);
                this.getInfo()
            }).finally(() => {
                this.importData = []
            })
        },
        onSelectionChange(selection) {
            this.selection = selection;
        },
        onRowClick(row) {
            this.$refs.table.toggleRowSelection(row);
        },
    },
    computed: {
        comTime() {
            return (time) => {
                const d = new Date(time * 1000);
                let nian = d.getFullYear();
                let yue = d.getMonth();
                let ri = d.getDate();
                return `${nian}-${yue + 1}-${ri}`;
            };
        },
        comMobileAddress() {
            return (item) => {
                switch (item) {
                    case 0:
                        return "未知"
                    case 1:
                        return "江西"
                    case 2:
                        return "省外"
                }

            }
        },
        computedTime() {
            return (time) => {
                let date = new Date(time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let year = date.getFullYear();
                let month = ("0" + (date.getMonth() + 1)).slice(-2);
                let sdate = ("0" + date.getDate()).slice(-2);
                let hour = ("0" + date.getHours()).slice(-2);
                let minute = ("0" + date.getMinutes()).slice(-2);
                let second = ("0" + date.getSeconds()).slice(-2);
                // 拼接
                let result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;
                // 返回
                return result;
            };
        },
        comMobileType() {
            return (mobile) => {
                switch (mobile) {
                    case 1:
                        return "移动"
                    case 2:
                        return "联通"
                    case 3:
                        return "电信"
                    case 4:
                        return "无法判断"
                }
            }
        }
    },
    mounted() {
        this.getInfo()
    }
}
</script>

<style lang="scss" scoped>
.total_amount {
    display: flex;
    align-items: center;
    justify-content: center;
}

.total_amount > .item {
    display: flex;
    align-items: center;
    margin-right: 100px;
    margin-top: 30px;
}

.inAll {
    width: 100%;
    background-color: #fff !important;
    // box-shadow: inset 0 0 1rem #20bcfc !important;
    height: 84px;
    display: flex;
    align-items: center;
    gap: 0 50px;
    justify-content: center;
    font-weight: 500;
    color: #222;
    border: 1px solid #222;
    border-top: none;

    div span:first-child {
        font-size: 24px !important;
    }

    div span:last-child {
        font-size: 20px !important;
    }
}

.spanText {
    color: red;
}
</style>